<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人中心</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="http://localhost:8080/static/layui/css/layui.css" rel="stylesheet">
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>个人中心</legend>
</fieldset>

<div class="layui-bg-gray" style="padding: 30px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6" style="width: 500px;">
            <div class="layui-card" style="width: 500px;">
                <div class="layui-card-header">个人信息</div>
                <div class="layui-card-body">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    </fieldset>

                    <div class="layui-upload">
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="demo1">
                            <p id="demoText"></p>
                        </div>
                        <button type="button" class="layui-btn" id="test1">上传图片</button>
                        <br/>

                        用户名称：<input type="text" name="loginName" value="" disabled="disabled" style="border: 0;"><br/>
                        手机号码：<input type="text" name="phoneNumber" value="" disabled="disabled" style="border: 0;"><br/>
                        用户邮箱：<input type="text" name="email" value="" disabled="disabled" style="border: 0;"><br/>
                        所属部门：<input type="text" name="deptName" value="" disabled="disabled" style="border: 0;"><br/>
                        所属角色：<input type="text" name="roleName" value="" disabled="disabled" style="border: 0;"><br/>
                        创建日期：<input type="text" name="createTime" value="" disabled="disabled" style="border: 0;"><br/>
                    </div>

                    <a name="list-progress"> </a>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card" style="height: 400px;width: 500px;">
                <div class="layui-card-header">基本资料</div>
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">基本资料</li>
                            <li>修改密码</li>
                        </ul>
                        <div class="layui-tab-content" style="height: 100px;">
                            <div class="layui-tab-item layui-show">
                                <form class="layui-form" action="javascript:void(0);"
                                      style="height: 300px;width: auto;">
                                    <input type="hidden" name="userId" value="">
                                    <input type="hidden" name="avatar" value=""><br/>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">用户昵称</label>
                                            <div class="layui-input-inline">
                                                <input type="tel" name="userName" lay-verify="required|name"
                                                       autocomplete="off" class="layui-input demo-phone">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">手机号码</label>
                                            <div class="layui-input-inline">
                                                <input type="tel" name="phoneNumber" lay-verify="required|phone"
                                                       autocomplete="off" class="layui-input demo-phone">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">邮箱</label>
                                            <div class="layui-input-inline">
                                                <input type="tel" name="email" lay-verify="required|email"
                                                       autocomplete="off" class="layui-input demo-phone">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label"></label>
                                            <div class="layui-input-inline">
                                                <input type="radio" name="sex" value="0">男&nbsp;&nbsp;&nbsp;&nbsp;
                                                <input type="radio" name="sex" value="1">女<br/>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label"></label>
                                            <div class="layui-input-inline">
                                                <input type="button" name="submit" class="layui-btn" lay-submit
                                                       lay-filter="formDemo" value="保存">&nbsp;&nbsp;&nbsp;&nbsp;
                                                <input type="button" name="close" class="layui-btn" value="关闭"><br/>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="layui-tab-item">
                                <form class="layui-form" action="javascript:void(0);"
                                      style="height: 300px;width: auto;">
                                    <input type="hidden" name="userId" value="">
                                    <input type="hidden" name="avatar" value=""><br/>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">旧密码</label>
                                            <div class="layui-input-inline">
                                                <input type="password" name="oldPassword" placeholder="请输入旧密码"
                                                       autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">新密码</label>
                                            <div class="layui-input-inline">
                                                <input type="password" name="newPassword" placeholder="请输入新密码"
                                                       autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">确认新密码</label>
                                            <div class="layui-input-inline">
                                                <input type="password" name="newPasswordTrue" placeholder="请再次输入新密码"
                                                       autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label"></label>
                                            <div class="layui-input-inline">
                                                <input type="button" name="submit" class="layui-btn" lay-submit
                                                       lay-filter="formDemo" value="保存">&nbsp;&nbsp;&nbsp;&nbsp;
                                                <input type="button" name="close" class="layui-btn" value="关闭"><br/>
                                            </div>
                                        </div>
                                    </div>

                                </form>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="http://localhost:8080/static/layui/layui.js"></script>
<script src="http://localhost:8080/static/layui/js/jquery-3.6.3.js"></script>

<script type="text/javascript">

        $(function () {
            //获取请求地址栏(url)中带id的参数名称
            let userId = getQueryletiable("userId");
            //console.log(userId);

            layui.use('form', function () {
                let form = layui.form;
                selectUser(form,userId);
            });
        });


        //在编辑页面中回显数据
        function getQueryletiable(key) {
            let url = location.search;  //获取当前地址栏请求数据
            let theRequest = new Object();
            if (url.indexOf("?") != -1) {
                let str = url.substr(1);
                let strInfo = str.split("&");
                for (let i = 0; i < strInfo.length; i++) {
                    theRequest[strInfo[i].split("=")[0]] = unescape(strInfo[i].split("=")[1]);
                }
            }
            let value = (theRequest[key] == null || theRequest[key] == undefined) ? null : theRequest[key];
            return value;
        }

        //个人信息显示
        function selectUser(form,userId) {
            $.ajax({
                url: "http://localhost:8080/sysUser/selectAllUser.do",
                data: {"userId": userId},
                success: function (res) {
                    //console.log(res);
                    let user = res.data[0];
                    let deptId = user.deptId;
                    let loginName = user.loginName;
                    let url = 'http://localhost:8080/';
                    url += user.avatar;
                    $('#demo1').attr('src', url);

                    $("[name= 'userId']").val(user.userId);
                    $("[name= 'avatar']").val(user.avatar);
                    $("[name= 'loginName']").val(user.loginName);
                    $("[name= 'userName']").val(user.userName);
                    $("[name= 'phoneNumber']").val(user.phoneNumber);
                    $("[name= 'email']").val(user.email);
                    $("[name= 'createTime']").val(user.createTime);
                    $("[name= 'sex']").eq(parseInt(user.sex)).prop("checked", true); //方式一
                    //$('[name="sex"][value='+user.sex+']').attr("checked","checked");    //方式二
                    //重要，重新渲染表单，否则单选、复选这些值不转换

                    //$("[name= 'password']").val(user.password);
                    selectDept(deptId);
                    selectRole(loginName);
                    form.render();
                },
                error: function () {
                    console.log("err...");
                }
            });
        }

        //用于查询部门名称
        function selectDept(deptId) {
            $.ajax({
                url: "http://localhost:8080/sysDept/selectAllDept.do",
                data: {"deptId": deptId},
                success: function (res) {
                    //console.log(res);
                    let dept = res.data[0];
                    $("[name= 'deptName']").val(dept.deptName);
                },
                error: function () {
                    console.log("err...");
                }
            });
        }

        //用于查询角色名称
        function selectRole(loginName) {
            $.ajax({
                url: "http://localhost:8080/sysRole/selectAllRole.do",
                data: {"loginName": loginName},
                success: function (res) {
                    //console.log(res);
                    let role = res.data[0];
                    $("[name= 'roleName']").val(role.roleName);
                },
                error: function () {
                    console.log("err...");
                }
            });
        }

        //用于修改用户信息
        //Demo
        layui.use('form', function () {
            let form = layui.form;

            //提交,form表单监听事件
            form.on('submit(formDemo)', function (data) {
                $.ajax({
                    url: "http://localhost:8080/sysUser/updateUser.do",
                    data: data.field,
                    type: "post",
                    dataType: "json",
                    success: function (res) {
                        //console.log(res);
                        if (res == 1) {
                            //添加成功，关闭当前弹窗层
                            layer.msg("修改成功");
                            let index = parent.layer.getFrameIndex(window.name);
                            //关闭当前窗口
                            parent.layer.close(index);
                            //刷新当前页面
                            parent.location.reload();
                        }else if (res ==2 ) {
                            layer.msg("旧密码错误");
                        }else if(res == 3){
                            layer.msg("新密码不能为空");
                        }else if(res == 4){
                            layer.msg("确认密码不能为空");
                        }else if(res == 5){
                            layer.msg("新密码和确认密码不一致");
                        }else {
                            layer.msg("修改失败");
                            console.log("修改失败");
                        }
                    },
                    error: function () {
                        console.log(" err....");
                    }
                });
            });
        });

</script>

<script>
    layui.use('element', function () {
        let $ = layui.jquery
            , element = layui.element;

        //触发事件
        let active = {
            tabAdd: function () {
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                    , content: '内容' + (Math.random() * 1000 | 0)
                    , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            , tabDelete: function (othis) {
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            , tabChange: function () {
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function () {
            let othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        let layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function (elem) {
            location.hash = 'test=' + $(this).attr('lay-id');
        });

    });
</script>

<script src="http://localhost:8080/static/layui/layui.js"></script>

<script>
    layui.use(['upload', 'element', 'layer', 'form'], function () {
        let $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer
            , from = layui.form;

        //常规使用 - 普通图片上传
        let uploadInst = upload.render({
            elem: '#test1'
            , url: 'http://localhost:8080/system/fileUploadPersonImg.do' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                console.log(res.msg);
                $("[name= 'avatar']").val(res.msg);
                //将上传文件的相对路径回显到页面中
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态
            }
            , error: function () {
                //演示失败状态，并实现重传
                let demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });
</script>
</body>
</html>